<template>
  <div id="nav" :class="{ p_static: isStatic, 'fullscreen-bottom-style': isFullscreen }">
    <router-link
      v-for="item in menu"
      :key="item.id"
      :to="item.link"
      class="btn"
      v-if="!(item.is_show === 0)"
    >
      <img class="icon" v-if="$route.path.indexOf(item.link) === -1" :src="item.icon" alt />
      <img class="icon" v-else :src="item.icon_on" alt />
      <div
        :class="{
          'btn-text': true,
          active: $route.path.indexOf(item.link) !== -1
        }"
        :style="activeColor(item)"
      >{{ item.name === '动态' ? '视频' : item.name }}</div>
    </router-link>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isStatic: false,
      cHeight: null
    };
  },
  computed: {
    ...mapState({
      menu: state => state.app.menu,
      isFullscreen: state => state.app.isFullscreen,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor
    })
  },
  watch: {},
  methods: {
    activeColor(item) {
      if (this.$route.path.indexOf(item.link) !== -1) {
        return { color: this.mainColor };
      }
      return {};
    }
  },
  created() {
    this.cHeight = document.documentElement.clientHeight;
    window.onresize = () => {
      this.isStatic =
        document.documentElement.clientHeight + 150 < this.cHeight
          ? true
          : false; //判断窗口是否大幅度缩小，以解决安卓端输入法撑起导航栏的问题
    };
  }
};
</script>
<style lang="less" scoped>
#nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // height: 2rem;
  background-color: #fff;
  border-top: 1px solid #dfdfdf;
  line-height: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .btn {
    text-align: center;
    width: 1.7rem;
    text-decoration: none;
    margin-bottom: 0.3rem;
    .icon {
      display: block;
      height: 0.86rem;
      margin: 0.3rem auto 0.18rem;
    }
    .btn-text {
      font-size: 0.44rem;
      line-height: 0.44rem;
      font-family: "PingFang-SC-Medium";
      font-weight: 400;
      color: #999999;
      letter-spacing: 2px;
      padding-left: 2px;
    }
    .active {
      color: #0078ff;
    }
  }
}
.p_static {
  position: static !important;
}
</style>
